<template>
  <!-- 全职招聘 -->
  <view class="box">
    <view v-if="!loding" class="box-wrap">
      <!-- <view class="head" :style="'padding-top:' + statusBarHeight1 + 'px'"> -->
      <view class="head">
        <view class="title">
          <image
            class="fanhui"
            @click.stop="fanhui"
            src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
            mode=""
          >
          </image>
          <view class="title-text">填写简历</view>
        </view>
      </view>

      <view class="center">
        <view class="center_top" v-if="!type">
          选择您的职位({{ chages.length }}/{{ maxNumber }})
        </view>
        <view class="list">
          <view class="label" v-for="(i, j) in chages" :key="j">
            {{ i.split(',')[2] }}
            <image
              class="image"
              @click="del(i)"
              src="https://pic.bangbangtongcheng.com/static/bbzc/delete.png"
              mode=""
            >
            </image>
          </view>
        </view>
      </view>

      <view class="select">
        <view class="left">
          <scroll-view class="scroll-view" scroll-y="true" scroll-with-animation >
            <view
              :class="xuan == j ? 'xuan li' : 'li'"
              v-for="(i, j) in List"
              :key="j"
              @click="xuanzhong(j)"
            >
              <view class="lableName">
                {{ i.lableName }}
              </view>
              <view class="quantity" v-if="xuan == j">
                {{ i.quantity }}
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="right">
          <scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTo" scroll-with-animation @scroll="scrollChange">
            <view class="iteam" v-for="(i, j) in List[xuan].children" :key="j">
              <view class="title">
                {{ i.lableName }}
              </view>
              <view class="label">
                <view
                  :class="s.active ? 'li xuan' : 'li'"
                  v-for="(s, y) in i.children"
                  :key="y"
                  @click="labelChage(j, y)"
                >
                  {{ s.lableName }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <uniBall></uniBall>

      <view class="submit-box">
        <view
          class="step-btn"
          :style="{ opacity: chages.length > 0 ? 1 : 0.5 }"
          @click="submitPosition"
        >
          <span></span>
          完成
          <img
            class="arrow-right-white"
            src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right-white.png"
            alt=""
          />
        </view>
      </view>
    </view>

    <dLoading v-if="loding"></dLoading>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  export default {
    data() {
      return {
        imgUrl: this.$imgSrc,
        index: '', // 1.全职 2.兼职
        List: [],
        xuan: 0,
        curTop: 300,
        chages: [],
        chages1: [],
        loding: true,
        type: '',
        maxNumber: 0, // 最大可选数量
        origin: '', // 跳转来源
        workExpIndex: '', // 工作经历索引（完善简历）
        scroll: '', // 返回时页面滚动高度
		/* 滚动高度 */
		scrollTop: 0,
		scrollTo: '',
		/* 滚动节流状态定时器 */
		scrollTime: null,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad(options) {
      this.index = options.index
      if (options.type) {
        this.type = options.type
      }
      // 地址栏参数，代表从不同业务跳转进来的选择职位的。选择的职位数量不同，获取数据源和保存数据字段不同
      this.origin = options.origin
      this.maxNumber = options.maxNumber
      this.workExpIndex = options.workExpIndex
      this.scroll = options.scroll
      if (this.origin == '1') {
        // 选择意向职位，最多选3个职位
        this.maxNumber = 3
        const intendedPosition = uni.getStorageSync('curriculumVitae').intendedPosition || ''
        if (intendedPosition) {
          // console.log('type', typeof(JSON.parse(intendedPosition)));
          this.chages = JSON.parse(intendedPosition)
          // console.log('changes', this.chages);
        }
      } else if (this.origin == '2') {
        // 选择工作经历职位，只能选1个职位
        this.maxNumber = 1
        this.chages = []
        const curriculumVitae = uni.getStorageSync('curriculumVitae')
        if (curriculumVitae) {
          let workExperience = JSON.parse(curriculumVitae.workExperience)[0]
          console.log('workExperience', workExperience)
          if (workExperience.positionName) {
            this.chages = JSON.parse(workExperience.positionName)
          }
        }
      } else if (this.origin == '3') {
        // 来自完善简历
        if (this.maxNumber == '1') {
          // 选择工作经历，只能选1个职位，并且需要带上工作经历索引
          const curriculumVitae = uni.getStorageSync('curriculumVitae')
          if (curriculumVitae) {
            let workExperienceItem = JSON.parse(curriculumVitae.workExperience)[this.workExpIndex]
            console.log('workExperienceItem.positionName', workExperienceItem.positionName)
            if (workExperienceItem.positionName) {
              let positionName = JSON.parse(workExperienceItem.positionName)
              console.log('positionName', typeof positionName)

              if (Array.isArray(positionName)) {
                this.chages = positionName
              }
            }
          }
        } else if (this.maxNumber == '3') {
          // 选择意向职位，最多选3个职位
          const intendedPosition = uni.getStorageSync('curriculumVitae').intendedPosition || ''
          if (intendedPosition) {
            // console.log('type', typeof(JSON.parse(intendedPosition)));
            this.chages = JSON.parse(intendedPosition)
            // console.log('changes', this.chages);
          }
        }
      }

      // 获取职位列表
      this.getData()

      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },

    methods: {
      // 反选
      fanxuan() {
        if (this.chages.length > 0) {
          this.chages.forEach((item) => {
            let arr = item.split(',')
            this.List.forEach((v) => {
              if (v.lableName == arr[0]) {
                v.children.forEach((s) => {
                  if (s.lableName == arr[1]) {
                    s.children.forEach((j) => {
                      if (j.lableName == arr[2]) {
                        j.active = true
                      }
                    })
                  }
                })
              }
            })
          })
          this.List.forEach((v) => {
            let SL = 0
            v.children.forEach((s) => {
              s.children.forEach((j) => {
                if (j.active) {
                  SL = SL + 1
                }
              })
            })
            v.quantity = SL
          })
        }
      },
      getData() {
        let that = this
        // recruitmentType参数：招聘类型（1：全职，2：兼职）
        this.$myRequest
          .get('/api/mobile/personnelOwner/getWholeIndustryType', {
            recruitmentType: this.index || '',
          })
          .then((res) => {
            res.industryTypeList.forEach((v) => {
              v.quantity = 0
              v.children.forEach((s) => {
                s.children.forEach((j) => {
                  j.active = false
                })
              })
            })
            this.List = res.industryTypeList
            this.fanxuan()
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
                this.lbHeight()
              }, 500)
            })
          })
      },
      xuanzhong(index) {
        this.xuan = index
		this.scrollToTop()
      },
	  scrollChange(e) {
		  console.log(e.target.scrollTop,'------')
	      this.scrollTop = e.target.scrollTop;
	  },
 
	  scrollToTop() {
	      this.scrollTo = -1;
	      this.$nextTick(() => {
	          this.scrollTo = 0;
	      });
	  },
      labelChage(j, y) {
        let montage1 = this.List[this.xuan].children[j].children[y].lableName
        if (this.type) {
          let pages = getCurrentPages()
          let prevPage = pages[pages.length - 2]
          prevPage.$vm.positionCategorys = montage1
          // prevPage.$vm.ZWLX = this.chages
          // this.fanhui();
          return
        }
        let montage =
          this.List[this.xuan].lableName +
          ',' +
          this.List[this.xuan].children[j].lableName +
          ',' +
          this.List[this.xuan].children[j].children[y].lableName
        if (
          !this.List[this.xuan].children[j].children[y].active &&
          this.chages.length >= this.maxNumber
        ) {
          uni.showToast({
            title: '选择数量已达到上限！',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.List[this.xuan].children[j].children[y].active =
          !this.List[this.xuan].children[j].children[y].active

        if (this.List[this.xuan].children[j].children[y].active) {
          this.chages.push(montage)
        } else {
          let index = this.chages.indexOf(montage)
          this.chages.splice(index, 1)
        }
        this.List.forEach((v) => {
          let SL = 0
          v.children.forEach((s) => {
            s.children.forEach((j) => {
              if (j.active) {
                SL = SL + 1
              }
            })
          })
          v.quantity = SL
        })
        this.lbHeight()
      },
      del(item) {
        let index = this.chages.indexOf(item)
        this.chages.splice(index, 1)
        let arr = item.split(',')
        this.List.forEach((v) => {
          if (v.lableName == arr[0]) {
            v.children.forEach((s) => {
              if (s.lableName == arr[1]) {
                s.children.forEach((j) => {
                  if (j.lableName == arr[2]) {
                    j.active = false
                  }
                })
              }
            })
          }
        })
        this.List.forEach((v) => {
          let SL = 0
          v.children.forEach((s) => {
            s.children.forEach((j) => {
              if (j.active) {
                SL = SL + 1
              }
            })
          })
          v.quantity = SL
        })
        this.lbHeight()
      },
      // 获取轮播高度
      lbHeight() {
        let that = this
        this.$nextTick(function () {
          uni
            .createSelectorQuery()
            .in(this)
            .select('.select')
            .boundingClientRect((result) => {
              if (result) {
                that.curTop = result.top
              }
            })
            .exec()
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      // 提交意向职位
      submitPosition() {
        console.log('changes====', this.chages)

        if (this.chages.length > 0) {
          const curriculumVitae =
            {
              ...uni.getStorageSync('curriculumVitae'),
            } || {}

          if (this.origin == '1') {
            // 来自选择意向职位
            curriculumVitae.intendedPosition = JSON.stringify(this.chages)
            uni.setStorageSync('curriculumVitae', curriculumVitae)
            uni.setStorageSync('zwlbss_key', this.chages)
            // 跳转到填写简历第3步
            uni.navigateTo({
              url: '/pages_recruitMoney/publish/writeResume?stepStatus=3',
            })
          } else if (this.origin == '2') {
            //来自选择工作经历
            let workExperience = JSON.parse(curriculumVitae.workExperience)
            workExperience[0].positionName = JSON.stringify(this.chages)
            curriculumVitae.workExperience = JSON.stringify(workExperience)
            uni.setStorageSync('curriculumVitae', curriculumVitae)
            // 跳转到填写工作经历描述
            uni.navigateTo({
              url: '/pages_recruitMoney/publish/more/personalAdvantages',
            })
          } else if (this.origin == '3') {
            // 来自完善简历-选择工作经历职位
            if (this.maxNumber == '1') {
              // 处理回显
              let getCurriculumVitae = uni.getStorageSync('curriculumVitae')
              let obj = JSON.parse(getCurriculumVitae.workExperience)
              obj[this.workExpIndex].positionName = JSON.stringify(this.chages)
              curriculumVitae.workExperience = JSON.stringify(obj)

              // 序列化所有工作经历职位
              // curriculumVitae.workExperience = JSON.stringify(workExperience)
            } else if (this.maxNumber == '3') {
              // 来自完善简历-选择意向职位
              curriculumVitae.intendedPosition = JSON.stringify(this.chages)
            }

            console.log(curriculumVitae, '123')
            uni.setStorageSync('curriculumVitae', curriculumVitae)

            // 跳转到完善简历
            /**
             * back - 1 职位类别返回完善简历
             */
            uni.navigateTo({
              url: `/pages_recruitMoney/publish/perfectResume?scroll=${this.scroll}&back=1`,
            })
          }
        } else {
          uni.showToast({
            title: '至少选择1个职位！',
            icon: 'none',
            mask: true,
          })
          return
        }
      },
    },

    // watch: {
    // 	chages: {
    // 		handler(newVal) {
    // 			if (newVal.length > 0) {
    // 				this.chages1 = newVal.map((el) => {
    // 					return el.split(",")[2];
    // 				});
    // 			}
    // 		},
    // 	},
    // },
    beforeDestroy() {
      /* 销毁前处理逻辑，因为用户可能不会点返回按钮销毁，而是左滑到右直接退出页面 */
      // let pages = getCurrentPages();
      // let prevPage = pages[pages.length - 2];
      // if (!this.type) {
      // 	prevPage.$vm.ZWLX = this.chages;
      // 	prevPage.$vm.positionCategorys = String(this.chages1);
      // }
    },
    onUnload() {
      // if (this.type) return;
      // let pages = getCurrentPages();
      // let prevPage = pages[pages.length - 2];
      // prevPage.$vm.ZWLX = this.chages;
    },
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100vh;
    background-color: #fff;
  }

  .box-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }

  .head {
    margin-top: 100rpx;
    padding: 20rpx;
    width: 100%;
    height: 100rpx;

    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;
    }

    .fanhui {
      width: 30rpx;
      height: 30rpx;
    }

    .title-text {
      margin-left: 10rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
    }

    .head_right {
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .center {
    padding: 0 20rpx;
    height: 170rpx;
    flex-shrink: 0;

    .center_top {
      margin: 0rpx 0 30rpx 0;
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
      margin-bottom: 20rpx;
    }

    .list {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      padding: 20rpx;
      width: 710rpx;
      height: 80rpx;
      background: #f5f7f9;
      border-radius: 10rpx;

      .label {
        position: relative;
        margin-right: 25rpx;
        padding: 8rpx 20rpx;
        text-align: center;
        border-radius: 4rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #666;
        background: #ebebed;

        .image {
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
        }
      }
    }
  }

  .select {
    flex-grow: 1;
    height: calc(100% - 200rpx - 170rpx - 160rpx);
    display: flex;
    .scroll-view {
      height: 100%;
    }
    .left {
      width: 230rpx;
      background: #f5f7f9;
      border-top-right-radius: 20rpx;

      .li {
        padding: 37rpx 0 35rpx 20rpx;
        display: flex;
        align-items: center;
        background: #f5f7f9;
        border-top-right-radius: 20rpx;

        .lableName {
          width: 168rpx;
          font-size: 26rpx;
          font-weight: 600;
          color: #333333;
        }

        .quantity {
          font-weight: 600;
          color: #64b6a8;
        }
      }

      .xuan {
        background-color: #f0f0f0;
        border-radius: 8rpx;

        .lableName {
          color: #64b6a8;
        }
      }
    }

    .right {
      flex: 1;

      .iteam {
        margin: 0 20rpx 0 20rpx;

        .title {
          margin-bottom: 30rpx;
          font-size: 32rpx;
          font-weight: 600;
          color: #000;
        }

        .label {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .li {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;
            width: 233rpx;
            height: 60rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #666;
            border: 1rpx solid #999;
            border-radius: 10rpx;
          }

          .xuan {
            position: relative;
            color: #0fa291;
            background: #e7f5f4;

            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              right: 0;
              width: 28rpx;
              height: 28rpx;
              background: url('https://pic.bangbangtongcheng.com/static/bbzc/checked-tag.png')
                center no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }

  .submit-box {
    align-self: flex-end;
    padding: 30rpx 0;
    width: 100%;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(24, 97, 93, 0.08);

    .step-btn {
      margin: 0 auto;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 710rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: #0fa291;
      border-radius: 50rpx;

      .arrow-right-white {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
</style>
